ITHACK
【JavaScript / DOM】ノードの取得 - getElement(s)By* / querySelectorAll

【JavaScript / DOM】ノードの取得 - getElement(s)By* / querySelectorAll

JavaScript/DOMの『ノードの取得』について解説します。

検証環境

ノードの取得

JavaScript/DOMはHTMLドキュメントのノードを取得できます。

ここでは要素ノード、属性ノード、テキストノード、コメントノードの取得方法について解説します、

要素ノード

Documentオブジェクトのメソッドでタグ名や属性（idやclassなど）の値を指定し、要素ノードを取得することが可能です。

主な５つのメソッドについて以下に解説します。

タグ名（getElementsByTagName）

DocumentオブジェクトのgetElementsByTagNameメソッドはタグ名を指定して要素ノードを取得できます。

基本構文

document.getElementsByTagName("タグ名")

サンプル

<h1>JavaScriptとは</h1>
<p>JavaScriptはプログラミング言語の１つです。</p>
<p>主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。</p>
<script type="text/javascript">
    ___ih_hl_start
    let elements = document.getElementsByTagName("p");
    ___ih_hl_end
    
    console.log(elements);
    
    for( let element of elements ) {
        console.log(element);
    }
</script>
HTMLCollection(2) [p, p]
<p>JavaScriptはプログラミング言語の１つです。</p>
<p>主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。</p>

getElementsByTagNameメソッドはHTMLCollectionを取得します。

HTMLCollectionは配列のようなデータ構造を持つ、複数の要素ノードを格納したオブジェクトです。

このオブジェクトに要素ノードが格納されているため、個々の要素ノードはfor文などを使って１つずつ取り出します。

id属性（getElementById）

DocumentオブジェクトのgetElementByIdメソッドはid属性の値を指定して要素ノードを取得できます。

基本構文

document.getElementById("id属性値")

サンプル

<h1 id="title">JavaScriptとは</h1>
<p>JavaScriptはプログラミング言語の１つです。</p>
<p>主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。</p>
<script type="text/javascript">
    ___ih_hl_start
    let elements = document.getElementById("title");
    ___ih_hl_end
    
    console.log(elements);
</script>
<h1 id="title">JavaScriptとは</h1>

５行目のdocument.getElementById("title")がid属性値を指定した要素ノードの取得です。

id属性値がtitleの要素ノードを取得しています。

class属性（getElementsByClassName）

DocumentオブジェクトのgetElementsByClassNameメソッドはclass属性の値を指定して要素ノードを取得できます。

基本構文

document.getElementsByClassName("class属性値")

サンプル

<h1 class="text">JavaScriptとは</h1>
<p class="text">JavaScriptはプログラミング言語の１つです。</p>
<p class="text">主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。</p>
<script type="text/javascript">
    ___ih_hl_start
    let elements = document.getElementsByClassName("text");
    ___ih_hl_end
    
    console.log(elements);
    
    for( let element of elements ) {
        console.log(element);
    }
</script>
HTMLCollection(3) [h1.text, p.text, p.text]
<h1 class="text">JavaScriptとは</h1>
<p class="text">JavaScriptはプログラミング言語の１つです。</p>
<p class="text">主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。</p>

getElementsByClassNameメソッドはHTMLCollectionを取得します。

HTMLCollectionは配列のようなデータ構造を持つ、複数の要素ノードを格納したオブジェクトです。

このオブジェクトに要素ノードが格納されているため、個々の要素ノードはfor文などを使って１つずつ取り出します。

name属性（getElementsByName）

DocumentオブジェクトのgetElementsByNameメソッドはname属性の値を指定して要素ノードを取得できます。

基本構文

document.getElementsByName("name属性値")

サンプル

<h1 name="text">JavaScriptとは</h1>
<p name="text">JavaScriptはプログラミング言語の１つです。</p>
<p name="text">主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。</p>
<script type="text/javascript">
    ___ih_hl_start
    let elements = document.getElementsByName("text");
    ___ih_hl_end
    
    console.log(elements);
    
    for( let element of elements ) {
        console.log(element);
    }
</script>
NodeList(3) [h1, p, p]
<h1 name="text">JavaScriptとは</h1>
<p name="text">JavaScriptはプログラミング言語の１つです。</p>
<p name="text">主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。</p>

getElementsByNameメソッドはNodeListを取得します。

NodeListは配列のようなデータ構造を持つ、複数の要素ノードを格納したオブジェクトです。

このオブジェクトに要素ノードが格納されているため、個々の要素ノードはfor文などを使って１つずつ取り出します。

CSSセレクター（querySelectorAll）

DocumentオブジェクトのquerySelectorAllメソッドはCSSセレクター形式の指定方法で要素を取得できます。

基本構文

document.querySelectorAll("セレクター形式")

サンプル

<h1 id="title">JavaScriptとは</h1>
<div class="box">
    <p class="text">JavaScriptはプログラミング言語の１つです。</p>
</div>
<p class="text">主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。</p>
<input type="text" value="test">
<script type="text/javascript">
    ___ih_hl_start
    let elements1 = document.querySelectorAll("#title");
    ___ih_hl_end
    
    console.log(elements1);
    
    for( let element of elements1 ) {
        console.log(element);
    }
    
    
    ___ih_hl_start
    let elements2 = document.querySelectorAll(".box .text");
    ___ih_hl_end
    
    console.log(elements2);
    
    for( let element of elements2 ) {
        console.log(element);
    }
    
    
    ___ih_hl_start
    let elements3 = document.querySelectorAll('[type="text"]');
    ___ih_hl_end
    
    console.log(elements3);
    
    for( let element of elements3 ) {
        console.log(element);
    }
</script>
NodeList [h1#title]
<h1 id="title">JavaScriptとは</h1>
NodeList [p.text]
<p class="text">JavaScriptはプログラミング言語の１つです。</p>
NodeList [input]
<input type="text">

querySelectorAllメソッドはNodeListを取得します。

NodeListは配列のようなデータ構造を持つ、複数の要素ノードを格納したオブジェクトです。

このオブジェクトに要素ノードが格納されているため、個々の要素ノードはfor文などを使って１つずつ取り出します。

応用

要素ノードはHTMLドキュメントにおける要素の階層構造（親子関係）と同様の階層関係を持ちます。

要素ノードに対して、上記の要素ノード取得メソッドを呼び出すこともでき、Documentオブジェクトから呼び出した場合はHTMLドキュメント全体が対象ですが、要素ノードの場合は子要素が対象となります。

<h1>JavaScriptとは</h1>
<div id="box">
    <p>JavaScriptはプログラミング言語の１つです。</p>
    <p>主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。</p>
</div>
<p>JavaScriptで記述したファイルをJSファイル（またはJavaScriptファイル）と呼びます。</p>
<p>ブラウザで動作するにはHTMLドキュメントからJSファイルを読み込みます。</p>

<script type="text/javascript">
    let box = document.getElementById("box");
    
    console.log(box);
    
    ___ih_hl_start
    let sentences = box.getElementsByTagName("p");
    ___ih_hl_end
    
    console.log(sentences);
    
    for( let e of sentences ) {
        console.log(e);
    }
</script>
<div id="box">...</div>
HTMLCollection(2) [p, p]
<p>JavaScriptはプログラミング言語の１つです。</p>
<p>主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。</p>

１０行目でdiv要素（２〜５行目の部分）を取得しています。

その要素に対して１４行目のbox.getElementsByTagName("p")でタグ名がpの子要素を取得しています。

実行結果から子要素のp要素ノードのみ取得したことが確認できます。

属性ノード

属性ノードは要素ノードのattributesプロパティから取得します。

基本構文

要素ノード.attributes[インデックス]

サンプル

<h1 id="title">JavaScriptとは</h1>
<div id="box">
    <!-- JavaScriptの概要 -->
    <p id="text" class="line">JavaScriptはプログラミング言語の１つです。</p>
    主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。
</div>

<script type="text/javascript">
    let element = document.getElementById("text");
    
    ___ih_hl_start
    console.log(element.attributes);
    ___ih_hl_end
    
    ___ih_hl_start
    console.log(element.attributes[0]);
    console.log(element.attributes[1]);
    ___ih_hl_end
</script>
NamedNodeMap {0: id, 1: class, id: id, class: class, length: 2}
id="text"
class="line"

attributesプロパティ値はNamedNodeMapオブジェクトです。

NamedNodeMapオブジェクトは要素ノードの全ての属性ノードを配列構造のように記憶しています。

各属性ノードは配列のようにブランケット記法でインデックスを指定して取得できます。

テキストノード

テキストノードは要素ノードのchildNodesプロパティ経由で取得します。

基本構文

要素ノード.childNodes[インデックス]

サンプル

<h1 id="title">JavaScriptとは</h1>
<div id="box">
    <!-- JavaScriptの概要 -->
    <p id="text" class="line">JavaScriptはプログラミング言語の１つです。</p>
    主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。
</div>

<script type="text/javascript">
    let element = document.getElementById("box");
    
    ___ih_hl_start
    console.log(element.childNodes);
    ___ih_hl_end
    
    ___ih_hl_start
    console.log(element.childNodes[0]);
    console.log(element.childNodes[2]);
    console.log(element.childNodes[4]);
    ___ih_hl_end
</script>
NodeList(5) [text, comment, text, p#text.line, text]
#text
  ...省略
  data: "\n    "
  ...省略
#text
  ...省略
  data: "\n    "
  ...省略
" 主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。 "

childNodesプロパティ値はNodeListオブジェクトです。

NodeListオブジェクトは要素ノードの全ての子ノードを配列構造のように記憶しています。

各テキストノードは配列のようにブランケット記法でインデックスを指定して取得できます。

※ 実行結果の#textは各ノード間の改行や空白を含むテキストノードです。


また、childNodesプロパティは全ての子ノードを含むため、テキストノードのみを動的に取得するにはnodeTypeプロパティが便利です。

nodeTypeプロパティはノードの種類を表し、値が3のノードはテキストノードになります。

<h1 id="title">JavaScriptとは</h1>
<div id="box">
    <!-- JavaScriptの概要 -->
    <p id="text" class="line">JavaScriptはプログラミング言語の１つです。</p>
    主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。
</div>

<script type="text/javascript">
    let element = document.getElementById("box");
    
    console.log(element.childNodes);
    
    ___ih_diff_start
-    console.log(element.childNodes[0]);
-    console.log(element.childNodes[2]);
-    console.log(element.childNodes[4]);
+    for( let e of element.childNodes ) {
+        if( e.nodeType == 3 ) {
+            console.log(e);
+        }
+    }
    ___ih_diff_end
</script>
NodeList(5) [text, comment, text, p#text.line, text]
#text
  ...省略
  data: "\n    "
  ...省略
#text
  ...省略
  data: "\n    "
  ...省略
" 主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。 "

コメントノード

テキストノードは要素ノードのchildNodesプロパティ経由で取得します。

基本構文

要素ノード.childNodes[インデックス]

サンプル

<h1 id="title">JavaScriptとは</h1>
<div id="box">
    <!-- JavaScriptの概要 -->
    <p id="text" class="line">JavaScriptはプログラミング言語の１つです。</p>
    主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。
</div>

<script type="text/javascript">
    let element = document.getElementById("box");
    
    ___ih_hl_start
    console.log(element.childNodes);
    ___ih_hl_end
    
    ___ih_hl_start
    console.log(element.childNodes[1]);
    ___ih_hl_end
</script>
NodeList(5) [text, comment, text, p#text.line, text]
<!-- JavaScriptの概要 -->

コメントノードの取得はテキストノードと同様です。

こちらもnodeTypeプロパティを使うことでインデックスを指定することなく動的に取得できます。

コメントノードのnodeTypeプロパティ値は8です。

<h1 id="title">JavaScriptとは</h1>
<div id="box">
    <!-- JavaScriptの概要 -->
    <p id="text" class="line">JavaScriptはプログラミング言語の１つです。</p>
    主にブラウザの動的処理に使われますが、サーバーやアプリでも活躍します。
</div>

<script type="text/javascript">
    let element = document.getElementById("box");
    
    console.log(element.childNodes);
    
    ___ih_diff_start
-    console.log(element.childNodes[1]);
+    for( let e of element.childNodes ) {
+        if( e.nodeType == 8 ) {
+            console.log(e);
+        }
+    }
    ___ih_diff_end
</script>
NodeList(5) [text, comment, text, p#text.line, text]
<!-- JavaScriptの概要 -->

ドキュメントノード

ドキュメントノードは“WEBドキュメントを表すノード”です。

JavaScript/DOMではドキュメントノードはDocumentオブジェクトとして扱います。

一般的なブラウザではWEBページを読み込むと、自動で変数documentにDocumentオブジェクトを格納します。

<script type="text/javascript">
    console.log(document);
</script>
#document

注意点

ブラウザで実行する場合、HTMLドキュメントの読み込み（ロード）前はノードを取得できません。

HTMLドキュメントは上から順番に読み込まれるため、次のようなDOMの処理が先に実行されるコードは期待した処理にならないことに注意してください。

<script type="text/javascript">
    let element = document.getElementById("title");
    console.log(element);
</script>

<h1 id="title">JavaScriptとは</h1>
null

ノードを正常に取得するには、対象のノードが読み込まれた後に行う必要があります。

【CSS】word-break - 単語中の改行
【コマンドライン】ユーザーのグループ確認 [ groups ]
【コマンドライン】ユーザー・グループの確認 [ getent ]
【JavaScript】イベントの伝搬 - キャプチャリング・バブリング
【JavaScript / DOM】属性ノードの取得・設定・削除 - 属性ノードを要素ノードで扱う方法
【JavaScript / DOM】ノード / textContentプロパティ - ノードのテキストを変更する
AtMarkRule
Browser
CentOS
Command
Command
CSS
Database
Development
DOM
Event
HTML
JavaScript
MarkupLanguage
MySQL
Network
OS
PHP
Programming
Property
Pseudo Class
Pseudo Element
Relational Database
Server
Standard Object
Tag